﻿@model naire_info

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>Index - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Css/base.css" rel="stylesheet" type="text/css" />
    <link href="~/Css/project_list_layout.css" rel="stylesheet" type="text/css" />

    <script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
    <!--    导航栏-->
    <nav class="nav_wrap">
        <div class="nav_container">
            <div class="nav_logo">
                <a href="#">
                    <img src="~/Images/logo_dog.png" />
                </a>
            </div>
            <div class="nav_list_wrap">
                <ul class="nav_list">
                    <li class="nav_list_item active" id="nav_project">我的项目</li>
                    <li class="nav_list_item" id="nav_info">我的信息</li>
                </ul>
                <div class="line_blue"></div>
            </div>
            <div class="nav_user">
                <div class="nav_about">关于我们</div>
                <div class="nav_avatar">
                    <img src="~/Images/132.png" id="user_avatar2" />
                    <!--    弹出层-->
                    <div class="user_info">
                        <div class="user_name" id="name">odd</div>
                        <div class="user-exit" id="exit">
                            <i class="glyphicon glyphicon-log-out" style="margin-right:10px;"></i>退出登录
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!--    我的项目-->
    <div class="section_project" id="section_project">

        <div class="project_wrap">
            <div class="project_nav">
                <!--    切换布局-->
                <div class="nav_tab">
                    <div class="tab_card_view nav_tab_active" id="tab_card_view">
                        <i class="glyphicon glyphicon-th-large"></i>
                    </div>
                    <span style="display:inline-block;float:left;line-height: 27px;padding-left: 1px;">|</span>
                    <div class="tab_list_view" id="tab_list_view">
                        <i class="glyphicon glyphicon-list"></i>
                    </div>
                </div>
                <!--    搜索栏-->
                <div class="nav_search">
                    <i class="glyphicon glyphicon-search"></i>
                    <input type="text" class="search_input" readonly="readonly"/>
                </div>
                <!--    回收站-->
                <div class="nav_recycle" id="btn_recycle">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>回收站</span>
                </div>
            </div>

            <div class="project_list">
                <!--    网格布局-->
                <div class="card_wrap" id="card_wrap">
                    <ul class="card_ul_list" id="card_ul_list">
                        <li class="card_li" id="btn_create_project">
                            <a href="#" style="height: 100%;display: block;text-align: center;">
                                <div class="create_project">
                                    <i class="glyphicon glyphicon-plus" style="margin-right: 5px;"></i>
                                    <span>新建项目</span>
                                </div>
                            </a>
                        </li>

                        <!--     网格li布局-->
                        @*<li class="card_li">
                            <div class="project_title">
                                <div class="list_title_wrap">
                                    <span class="list_title">问卷标题</span>
                                    <span class="list_title_icon">问卷</span>
                                </div>
                                <div class="project_state state_unpublished">未发布</div>
                            </div>
                            <div class="project_details">
                                <span class="total_collection">0份数据</span>
                                <span class="edit_time">6分钟前</span>
                            </div>
                            
                            <div class="operate_bar">
                                <div class="operate_type">
                                    <i class="glyphicon glyphicon-pencil"></i>
                                    <span>编辑</span>
                                </div>
                                <div class="operate_type">
                                    <i class="glyphicon glyphicon-send"></i>
                                    <span>发布</span>
                                </div>
                                <div class="operate_type">
                                    <i class="glyphicon glyphicon-stats"></i>
                                    <span>数据</span>
                                </div>
                                <div class="operate_type">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    <span>回收</span>
                                </div>
                            </div>
                        </li>*@
                    </ul>
                </div>

                <!--    列表布局-->
                <div class="list_wrap project_list_hidden" id="list_wrap">
                    <table class="list_table_list">
                        <tbody id="list_table_list">
                            <tr class="table_header">
                                <td class="table_list_title">标题</td>
                                <td class="table_list_state">收集状态</td>
                                <td class="table_list_collection">收到数据</td>
                                <td class="table_list_create_time">创建时间</td>
                                <td class="table_list_edit_time">更新时间</td>
                                <td class="table_list_operate">操作</td>
                            </tr>

                            <!--    列表li布局-->
                            @*<tr class="table_tab">
                                <td class="table_list_title">问卷标题</td>
                                <td class="table_list_state state_unpublished">未发布</td>
                                <td class="table_list_collection">0</td>
                                <td class="table_list_create_time">2019-12-19</td>
                                <td class="table_list_edit_time">1小时前</td>
                                <td class="table_list_operate">
                                    <div class="operate_type">编辑</div>
                                    <div class="operate_type">发布</div>
                                    <div class="operate_type">数据</div>

                                    <div class="operate_type">
                                        <i class="glyphicon glyphicon-trash"></i>
                                    </div>
                                </td>
                            </tr>*@
                        </tbody>
                    </table>
                </div>
                <div class="clearfix"></div>
            </div>

        </div>

    </div>

    <!--    我的信息-->
    <div class="section_info hidden" id="section_info">
        <div class="info_wrap">
            <div class="base_info">
                <div class="base_info_title">账号信息<span class="base_info_change" id="base_info_change">修改</span></div>
                <div class="base_info_item" style="margin-top:40px;">
                    <span class="item_name">账号：</span><span id="user_account">793523185@qq.com</span>
                </div>
                <!--    正常状态-->
                <div class="item_wrap_normal" id="item_wrap_normal">

                    <div class="base_info_item">
                        <span class="item_name">用户昵称：</span><span id="user_name">odd</span>
                    </div>
                    <div class="base_info_item">
                        <span class="item_name">密码：</span><span id="user_password">*******</span><span class="display" onclick="ShowPassword(this)">显示密码</span>
                    </div>
                </div>

                <!--    修改状态-->
                <div class="item_wrap_edit base_info_hidden" id="item_wrap_edit">
                    <div class="base_info_item">
                        <span class="item_name">用户昵称：</span>
                        <span>
                            <input type="text" class="form-control input_edit" id="upName" />
                        </span>
                    </div>
                    <div class="base_info_item">
                        <span class="item_name">密码：</span>
                        <span>
                            <input type="password" class="form-control input_edit" id="upPassword" />
                        </span>
                    </div>
                    <label class="error_lable" id="error_message"></label>


                    <button class="btn_change_info btn-primary btn" id="btn_change_info">完成修改</button>
                </div>


            </div>

            <div class="avatar_info">
                <div class="avatar_img">
                    <img src="~/Images/132.png" id="user_avatar" />
                </div>
                <button class="btn_change_avatar btn-primary btn" id="changeAvatar">更换头像</button>
            </div>
        </div>
    </div>

    <!--    脚部-->
    <footer class="footer_wrap">
        <img src="~/Images/bq_logo.png" />
    </footer>

    <!--    回收站-->
    <div class="recycle_dialog hidden" id="recycle_dialog">
        <div class="recycle_bg"></div>
        <div class="recycle_content">
            <div class="recycle_top">
                <h2 class="recycle_title" style="float:left">回收站</h2>
                <div class="recylce_close" style="float:right">
                    <i class="glyphicon glyphicon-remove"></i>
                </div>
                <div class="clearfix"></div>
            </div>
            
            <div class="recycle_context">
                <table>
                    <thead>
                        <tr>
                            <th class="checkbox_wrap" scope="col">
                                <input class="checkbox" type="checkbox" style="margin: 0 auto;">
                            </th>
                            <th scope="col" width="50%">标题</th>
                            <th scope="col" style="width:130px;">收集数据</th>
                            <th scope="col" style="width:130px;">创建时间</th>
                            <th scope="col" style="width:130px;">删除时间</th>
                        </tr>
                    </thead>
                    <tbody class="recycle_data"> 
                        @*<tr>
                            <td class="checkbox_wrap"> 
                                <input data-naire-id="2" class="checkbox" type="checkbox" style="margin: 0 auto;"> 
                            </td> 
                            <td class="table_recycle_td_title">问卷标题</td> 
                            <td>0</td> 
                            <td>2019年12月16日</td> 
                            <td>2019年12月18日</td> 
                        </tr>*@  
                    </tbody>
                </table>
            </div>

            <div class="recycle_bottom">
                <button class="btn btn-default btn_restore">恢复</button>
                <button class="btn btn-primary btn_delete">删除</button>
            </div>
        </div>
    </div>

    <input class="hidden" id="naire_json" value="@ViewBag.NaireInfo" />

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Js/project_list_layout.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var upImg;
        function getCookie(name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
            if (arr = document.cookie.match(reg))
                return unescape(arr[2]);
            else
                return null;
        }   
        document.getElementById('name').innerText = getCookie("user_name");
        document.getElementById('user_account').innerText = getCookie("user_account")
        document.getElementById('user_name').innerText = getCookie("user_name")
        if (getCookie('user_avatar') != "") {
            document.getElementById('user_avatar').src = getCookie("user_avatar")
            document.getElementById('user_avatar2').src = getCookie("user_avatar")
        }
        //$(".card_li")[1].childNodes[4].childNodes[0].onclick = function () {
        //    console.log("hsdkfsgf")
        //}
        var user_id = getCookie("user_id");
        $(".card_li")[0].onclick = function () {
            window.location.href = "../EditProject/Index?=" + user_id;
        }
        for (let i = 1; i < $(".card_li").length; i++) {

            $(".card_li")[i].childNodes[4].childNodes[0].onclick = function () {
                let v = $(".card_li")[i].attributes[1].value
                window.location.href = "../EditProject/Index?naire_id="+v;
            }
            $(".card_li")[i].childNodes[4].childNodes[1].onclick = function () {
                let v = $(".card_li")[i].attributes[1].value
                window.location.href = "../PublishProject/Index?naire_id="+v;
            }
            $(".card_li")[i].childNodes[4].childNodes[3].onclick = function () {
                let v = $(".card_li")[i].attributes[1].value
                window.location.href = "../StatisticProject/Index?naire_id=" + v;
            }

        }
        //console.log($(".table_tab")[0].childNodes[5].childNodes[0])
        for (let i = 0; i < $(".table_tab").length; i++) {

            $(".table_tab")[i].childNodes[5].childNodes[0].onclick = function () {
                let v = $(".table_tab")[i].attributes[1].value
                window.location.href = "../EditProject/Index?naire_id="+v;
            }
            $(".table_tab")[i].childNodes[5].childNodes[1].onclick = function () {
                let v = $(".table_tab")[i].attributes[1].value
                window.location.href = "../PublishProject/Index?naire_id="+v;
            }
            $(".table_tab")[i].childNodes[5].childNodes[2].onclick = function () {
                let v = $(".table_tab")[i].attributes[1].value
                window.location.href = "../StatisticProject/Index?naire_id=" + v;
            }

        }
        var file; // 定义一个全局变量，为一个文本选择器。
        file = $('<input type="file"  accept="image/*"/>'); // 这样file就是jquery创建的一个文本选择器，但是因为我们并没有把它加载到页面山，所以是不可见的。
        $('#changeAvatar').click(function () {
            // 启动文件选择
            file.click();
        });

        //删除cookies
        function DeleteCookie(name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval = getCookie(name);
            if (cval != null)
                document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
        }
        var upName = document.getElementById("upName");
        var upPassword = document.getElementById("upPassword");


        upName.addEventListener('focus', ClearMessage, false);
        upPassword.addEventListener('focus', ClearMessage, false);

        //点击输入框删除提示
        function ClearMessage() {
            error_message.innerText = "";
            error_message.style.display = "none";
        }

        //退出登录
        var exit = document.getElementById("exit");
        exit.addEventListener('click', ExitLogin, false);
        //退出登录转到登录界面
        function ExitLogin() {
            deleteCookie("user_name");
            deleteCookie("user_account");
            deleteCookie("user_password");
            deleteCookie("user_id");
            window.location.href = "../Login/Index";
        }

        //删除cookies
        function deleteCookie(name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval = getCookie(name);
            if (cval != null)
                document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
        }



        $("#btn_change_info").click(function () {

            var error_message = document.getElementById("error_message");
            var name = $("#upName").val();
            var password = $("#upPassword").val();
            

            if (name == "" && password == "") {
                error_message.innerText = "请输入信息完成修改！";
                error_message.style.display = "block";
                return;
            }


            //用户名和修改前重复
            if (name == getCookie("manage_name")) {
                error_message.innerText = "输入的用户名和修改前一致！";
                error_message.style.display = "block";
                return;
            }
            //密码和修改前重复
            if (password == getCookie("manage_password")) {
                error_message.innerText = "输入的密码和修改前一致！";
                error_message.style.display = "block";
                return;
            }

            //用户名为空
            if (name == "" && password != "") {
                name = getCookie("user_name");
            }
            //密码为空
            if (name != "" && password == "") {
                password = getCookie("user_password");
            }

            axios.post('../ProjectList/upInfo', {
                id:getCookie("user_id"),
                name: name,
                password: password
            })
            .then(function (response) {
                console.log(response.data);
                
                document.getElementById('user_name').innerText = getCookie("user_name");
                DeleteCookie("user_name");
                DeleteCookie("user_account");
                DeleteCookie("user_password");
                alert("修改信息成功，返回登录界面！");
                window.location.href = "../Login/Index";

           })
        .catch(function (error) {
          console.log(error);
        });
        })
        var select_file
        file.change(function (e) {
            var _URL = window.URL || window.webkitURL;
            var file, img;
            if ((file = this.files[0])) {
                img = new Image();
                img.onload = function () {
                    $('#user_avatar').attr('src', this.src);
                };
                let i = _URL.createObjectURL(file);
                console.log(_URL.createObjectURL(file));
                getBase64(i);
                
            }
        })
        function getBase64(imgUrl) {
            window.URL = window.URL || window.webkitURL;
            var xhr = new XMLHttpRequest();
            xhr.open("get", imgUrl, true);
            xhr.responseType = "blob";
            xhr.onload = function () {
                if (this.status == 200) {
                    //得到一个blob对象
                    var blob = this.response;
                    let oFileReader = new FileReader();
                    oFileReader.onloadend = function (e) {
                        let base64 = e.target.result;
                        upDataImg(base64);
                        console.log(base64)
                        document.getElementById('user_avatar').src = base64;
                        document.getElementById('user_avatar2').src = document.getElementById('user_avatar').src;
                    };
                    oFileReader.readAsDataURL(blob);

                    let src = window.URL.createObjectURL(blob);

                    console.log(src)

                }
            }
            xhr.send();
        }
        function upDataImg(upImg) {
            axios.post('../ProjectList/upImg', {
                avatar: upImg,
                id:getCookie("user_id")
             })
            .then(function (response) {
                console.log(response.data);
        })
        .catch(function (error) {
          console.log(error);
        });
        }


        //显示密码
        function ShowPassword(obj) {
            var user_password = document.getElementById("user_password");
            var password = getCookie("user_password");

            if (user_password.innerText == "*******") {
                user_password.innerText = password;
                obj.innerText = "隐藏密码";
            }
            else {
                user_password.innerText = "*******"
                obj.innerText = "显示密码";
            }
        }
    </script>
</body>
</html>
